<template>
  <div class="container">
    <div class="card-list">
      <div class="card-item"><p>所有患者：{{ patient_number_hospitalizationStage }}</p></div>
      <div class="card-item"><p>当前入院：{{ patient_number_hospitalizationStage1 }}</p></div>
      <div class="card-item"><p>正在治疗：{{ patient_number_hospitalizationStage2 }}</p></div>
      <div class="card-item"><p>即将出院：{{ patient_number_hospitalizationStage3 }}</p></div>
    </div>
    <div class="echarts_type_1" ref="echarts2"></div>

  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';
import patientAxios from "@/api/patient.js"

/**
 * 住院阶段
 */
const patient_number_hospitalizationStage = ref(0)
const patient_number_hospitalizationStage1 = ref(0)
const patient_number_hospitalizationStage2 = ref(0)
const patient_number_hospitalizationStage3 = ref(0)
/**
 * 治疗阶段
 */
const patient_number_treatmentStage1 = ref(0)
const patient_number_treatmentStage2 = ref(0)
const patient_number_treatmentStage3 = ref(0)
const patient_number_treatmentStage4 = ref(0)
onMounted(() => {
  http_patient_findAll()
  http_patient_findNumberByHospitalizationStage1()
  http_patient_findNumberByHospitalizationStage2()
  http_patient_findNumberByHospitalizationStage3()
  http_patient_findNumberByTreatmentStage1()
  http_patient_findNumberByTreatmentStage2()
  http_patient_findNumberByTreatmentStage3()
  http_patient_findNumberByTreatmentStage4()
})
/**
 * 查询住院阶段人数
 */
const http_patient_findAll = () => {
  patientAxios.patient_findAll().then(res => {
    if (res.data.code == 200) {
      patient_number_hospitalizationStage.value = res.data.data.length
    }
  })
}
const http_patient_findNumberByHospitalizationStage1 = () => {
  patientAxios.patient_findNumberByHospitalizationStage({
    hospitalizationStage: 1
  }).then(res => {
    if (res.data.code == 200) {
      patient_number_hospitalizationStage1.value = res.data.data
    }
  })
}
const http_patient_findNumberByHospitalizationStage2 = () => {
  patientAxios.patient_findNumberByHospitalizationStage({
    hospitalizationStage: 2
  }).then(res => {
    if (res.data.code == 200) {
      patient_number_hospitalizationStage2.value = res.data.data
    }
  })
}
const http_patient_findNumberByHospitalizationStage3 = () => {
  patientAxios.patient_findNumberByHospitalizationStage({
    hospitalizationStage: 3
  }).then(res => {
    if (res.data.code == 200) {
      patient_number_hospitalizationStage3.value = res.data.data
    }
  })
}
/**
 * 查询治疗阶段人数
 */
const http_patient_findNumberByTreatmentStage1 = () => {
  patientAxios.patient_findNumberByTreatmentStage({
    treatmentStag: 1
  }).then(res => {
    if (res.data.code == 200) {
      patient_number_treatmentStage1.value = res.data.data
    }
  })
}
const http_patient_findNumberByTreatmentStage2 = () => {
  patientAxios.patient_findNumberByTreatmentStage({
    treatmentStag: 2
  }).then(res => {
    if (res.data.code == 200) {
      patient_number_treatmentStage2.value = res.data.data
    }
  })
}
const http_patient_findNumberByTreatmentStage3 = () => {
  patientAxios.patient_findNumberByTreatmentStage({
    treatmentStag: 3
  }).then(res => {
    if (res.data.code == 200) {
      patient_number_treatmentStage3.value = res.data.data
    }
  })
}
const http_patient_findNumberByTreatmentStage4 = () => {
  patientAxios.patient_findNumberByTreatmentStage({
    treatmentStag: 4
  }).then(res => {
    if (res.data.code == 200) {
      patient_number_treatmentStage4.value = res.data.data
    }
  })
}


/**
 * 柱状
 */
// 定义响应式的图表数据
const echarts2_data = ref({
  xAxisData: ['急性期', '亚急性期', '慢性期', '康复期'],
  seriesData: [1, 7, 9, 2],
  // seriesData: [
  //   patient_number_treatmentStage1.value,
  //   patient_number_treatmentStage2.value,
  //   patient_number_treatmentStage3.value,
  //   patient_number_treatmentStage4.value,
  // ],
});
// 用于保存echarts实例
const echarts2 = ref(null);
// 初始化图表的函数
const echarts2_create = () => {
  const myChart = echarts.init(echarts2.value);
  const option = {
    title: {
      text: '治疗阶段'
    },
    xAxis: {
      type: 'category',
      data: echarts2_data.value.xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: echarts2_data.value.seriesData,
        type: 'bar'
      }
    ]
  };
  myChart.setOption(option)
}

onMounted(() => {

  echarts2_create()

});
</script>

<style scoped lang="scss">
.container {
  padding-top: 10px;
}

.card-list {
  display: flex;
  margin-left: 10px;
  width: 98%;
  margin-top: 10px;
  margin-bottom: 10px;

  .card-item {
    width: 25%;
    margin: 10px;
    padding: 60px;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    background-color: #ffffff;

  }
}

.echarts_type_1 {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: #ffffff;
  height: 400px;
  width: 97%;
}

.echarts_type_2 {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  height: 400px;
  background-color: #ffffff;
  width: 47%;
}
</style>
